<template>
	<div class="content">
		<van-nav-bar title="订单" left-text="返回" left-arrow @click-left="onClickLeft" />
		<div class="swiper">
			<van-tabs v-model:active="active" swipeable sticky>
				<van-tab v-for="item in tabList" :title="item.tab">
					<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
						<lazy-component>
							<div class="one" v-for="(item1, index1) in item.orderList" v-if="item.orderList.length">
								<div class="name">{{ item1.s_name }}
									<van-icon name="arrow" />
								</div>
								<div class="time">{{ item1.s_create_time }}</div>
								<div class="operate" v-if="active == 0">
									<van-button type="primary" size="mini"
										@click="toPay(tabList[active].orderList[index1].orealid, tabList[active].orderList[index1].total_price, index1)">
										支付
									</van-button>
								</div>
								<div class="status">{{ status(item1.ostatus) }}</div>
								<van-loading type="spinner" color="#1989fa"
									style="position:relative ;left:50%;transition:transform(-50%);" v-if="!count" />
								<div class="small" v-for="item2 in item1.list" v-else :key="item2">
									<!-- <lazy-component> -->
										<van-card style="font-size: 1rem;" :num="item2.num" :price="item2.m_price"
											:desc="item2.m_intro" :title="item2.m_name" :thumb="item2.m_pic"
											:lazy-load="true" />
									<!-- </lazy-component> -->
								</div>
								<div class="total">
									<div class="money">￥{{ (item1.total_price * 1).toFixed(2) }}</div>
									<div class="sum">共{{ item1.sum }}件</div>
									<div class="realid">订单编号:{{ item1.orealid }}</div>
								</div>
							</div>
							<van-empty class="empty"
								image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
								description="空空如也" v-else />	
						</lazy-component>

					</van-pull-refresh>
				</van-tab>
			</van-tabs>
		</div>
		<TabBar />
	</div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
const onClickLeft = () => history.back();
const count = ref(false);
const active = ref(0)
const isLoading = ref(false);
const tabList = ref([])
const userInfoCookie = useCookie('userInfo')
const status = ((ostatus) => {
	switch (ostatus) {
		case 0:
			return '待支付'
			break;
		case 1:
			return '待取餐'
			break;
		case 2:
			return '已完成'
			break;
		case 3:
			return '退单'
			break;
	}
})
let hasPay = computed(() => {
	return
})
const loadData = async () => {
	let userInfo = userInfoCookie.value
	const { data } = await myUseFetch('/userorderlist', { method: 'post', body: userInfo.uid })
	let ress = data.value
	if (ress.code == -1) {
		console.log(ress)
	} else if (ress.code == 0) {
		// console.log(ress)
		tabList.value.forEach(item => item.orderList = [])
		ress.data.forEach(item => {
			tabList.value[item.ostatus].orderList.push({
				s_name: item.sname,
				s_create_time: item.ocreatetime,
				total_price: item.ototalprice,
				sum: item.sum,
				oid: item.oid,
				orealid: item.orealid,
				ostatus: item.ostatus,
				list: []
			})
		})
		const { data } = await myUseFetch('/userorderlistdetail', { method: 'post', body: userInfo.uid })
		let res = data.value
		if (res.code == -1) {
			console.log(res)
		} else if (res.code == 0) {
			// console.log(res)
			res.data.forEach(item1 => {
				tabList.value[item1.ostatus].orderList.forEach(item2 => {
					if (item2.oid == item1.odoid) {
						item2.list.push({
							m_name: item1.mname,
							m_intro: item1.mintro,
							m_pic: item1.mpic,
							m_price: item1.mprice,
							num: item1.odmcount
						})
					}
				})
			})
			count.value = true
			isLoading.value = false;
		}
	}
}
loadData()
tabList.value = [
	{
		tab: "待支付",
		orderList: []
	},
	{
		tab: "待取餐",
		orderList: []
	},
	{
		tab: "已完成",
		orderList: []
	},
	{
		tab: "退单",
		orderList: []
	}
]
const toPay = (orealid, total_price, index) => {
	console.log(orealid, total_price, index)
	window.open(`http://orderonline.cwiyc.top:9090/alipay/pay?subject=${orealid}&traceNo=${orealid}&totalAmount=${total_price}`)
}
const onRefresh = () => {
	loadData()
};
</script>

<style scoped lang="scss">
.content {
	height: 100%;
	min-height: 100vh;
	background-color: rgb(240, 236, 236);
	font-size: 1rem;


	.swiper {
		height: 100%;
		padding-bottom: 5rem;

		.one {
			width: 95%;
			border-radius: 10px;
			margin: 0 auto;
			// height: 6rem;
			margin-top: 0.5rem;
			background-color: #fff;
			position: relative;

			.name {
				font-size: 1rem;
				padding: 8px 12px 0 12px;
				font-weight: bold;
			}

			.time {
				font-size: 0.8rem;
				padding: 0px 12px 0 12px;
			}

			.operate {
				position: absolute;
				z-index: 999;
				top: 0.5rem;
				right: 6rem;
			}

			.status {
				position: absolute;
				z-index: 999;
				top: 0.8rem;
				right: 1rem;
				color: green;
				font-weight: bold;
				font-size: 0.9rem;
			}

			.small {
				width: 100%;
			}

			.total {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				padding: 12px 15px 10px 0;

				.money {
					font-weight: bold;
					font-size: 0.9rem;
				}

				.sum {
					font-size: 0.8rem;
					margin-right: 5px;
				}

				.realid {
					font-size: 0.8rem;
					position: absolute;
					left: 1rem;
				}
			}
		}

		.empty {
			height: 70vh;
		}
	}
}
</style>